<template>
  <div>
    <el-row>
      <el-col :span="24">
        <center><h3>核算报表</h3></center>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form :model="form" :rules="rules" :inline="true">
          <el-form-item label="核算日期" prop="date">
            <el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" v-show="accountVisible" @click="hourVisible = true">核算</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row style="margin-top:15px">
      <el-col :span="24">
        <el-table :data="alysisToday" border style="width: 100%;" :height="tableHeigh" v-loading="isLoading" element-loading-text="查询中，请稍候..." >
          <el-table-column prop="title" label="标题" min-width="200" align="center"></el-table-column>
          <el-table-column prop="date" label="日期" width="120" align="center"></el-table-column>
          <el-table-column prop="tuWenYueDuRenShu" label="阅读人" width="80" align="center"></el-table-column>
          <el-table-column prop="tuWenYueDuCiShu" label="阅读次" width="80" align="center"></el-table-column>
          <el-table-column prop="gongZhongHaoRenShu" label="公众号人" width="95" align="center"></el-table-column>
          <el-table-column prop="gongZhongHaoCiShu" label="公众号次" width="95" align="center"></el-table-column>
          <el-table-column prop="pengYouQuanRenShu" label="朋友圈人" width="95" align="center"></el-table-column>
          <el-table-column prop="pengYouQuanCiShu" label="朋友圈次" width="95" align="center"></el-table-column>
          <el-table-column prop="fenXiangRenShu" label="分享人" width="80" align="center"></el-table-column>
          <el-table-column prop="fenXiangCiShu" label="分享次" width="80" align="center"></el-table-column>
          <el-table-column prop="weiXinShouCangRenShu" label="收藏人" width="80" align="center"></el-table-column>
          <el-table-column prop="weiXinShouCangCiShu" label="收藏次" width="80" align="center"></el-table-column>
          <el-table-column prop="liShiRenShu" label="历史人" width="80" align="center"></el-table-column>
          <el-table-column prop="liShiCiShu" label="历史次" width="80" align="center"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <tw-hour v-model="hourVisible" :total="total"></tw-hour>
  </div>
</template>

<script type="text/javascript">
  import { mapGetters } from 'vuex'
  import twHour from './tw0002-hour.vue'

  export default {
    computed: {
      ...mapGetters(['getWindowsHeight']),
      tableHeigh () {
        return this.getWindowsHeight - 220;
      },
      alysisToday () {
        if (this.compDate && this.alysis.length){
          let list = [];
          let json = {
            title: '总计',
            date: this.compDate,
            gongZhongHaoRenShu: 0,
            tuWenYueDuRenShu: 0,
            gongZhongHaoCiShu: 0,
            tuWenYueDuCiShu: 0,
            pengYouQuanRenShu: 0,
            pengYouQuanCiShu: 0,
            fenXiangRenShu: 0,
            fenXiangCiShu: 0,
            weiXinShouCangRenShu: 0,
            weiXinShouCangCiShu: 0,
            liShiRenShu: 0,
            liShiCiShu: 0
          };
          for (let row of this.alysis){
            for (let yuedu of row.content.yueDuList){
              if (yuedu.date === this.compDate){
                yuedu.liShiRenShu = yuedu.tuWenYueDuRenShu - yuedu.gongZhongHaoRenShu - yuedu.pengYouQuanRenShu - yuedu.fenXiangRenShu - yuedu.weiXinShouCangRenShu;
                yuedu.liShiCiShu = yuedu.tuWenYueDuCiShu - yuedu.gongZhongHaoCiShu - yuedu.pengYouQuanCiShu - yuedu.fenXiangCiShu - yuedu.weiXinShouCangCiShu;
                list.push({
                  ... yuedu,
                  id: row.content.id,
                  title: row.content.title,
                  date: new Date(row.date).format('yyyy-MM-dd')
                });

                json.gongZhongHaoRenShu += yuedu.gongZhongHaoRenShu;
                json.tuWenYueDuRenShu += yuedu.tuWenYueDuRenShu;
                json.gongZhongHaoCiShu += yuedu.gongZhongHaoCiShu;
                json.tuWenYueDuCiShu += yuedu.tuWenYueDuCiShu;
                json.pengYouQuanRenShu += yuedu.pengYouQuanRenShu;
                json.pengYouQuanCiShu += yuedu.pengYouQuanCiShu;
                json.fenXiangRenShu += yuedu.fenXiangRenShu;
                json.fenXiangCiShu += yuedu.fenXiangCiShu;
                json.weiXinShouCangRenShu += yuedu.weiXinShouCangRenShu;
                json.weiXinShouCangCiShu += yuedu.weiXinShouCangCiShu;
                json.liShiRenShu += yuedu.liShiRenShu;
                json.liShiCiShu += yuedu.liShiCiShu;
                continue;
              }
            }
          }
          list.push(json);
          return list;
        }
        return [];
      },
      total () {
        if (this.alysisToday.length){
          return this.alysisToday[this.alysisToday.length - 1];
        }
        return [];
      }
    },
    data () {
      return {
        alysis: [],
        form: {
          date: new Date()
        },
        isLoading: false,
        hourVisible: false,
        accountVisible: false,
        compDate: ''       //核算日期
      }
    },
    methods: {
      async search () {
        this.compDate = this.form.date.format('yyyy-MM-dd');
        let data = await this.$api.call({
          service: 'alysis7days',
          body: {
            date: this.compDate
          },
          load: {
            context: this,
            name: 'isLoading'
          }
        });
        console.log(data);
        this.$set(this, 'alysis', data.alysis);
        this.accountVisible = true;
      }
    },
    components: {
      twHour
    }
  }
</script>